<script lang="ts" setup>
import { ref, watch } from 'vue'
import {
  onPageScroll,
  onReady,
  onShow,
  onShareAppMessage,
} from '@dcloudio/uni-app'
import { useScrollUpdownBottomContent } from '@/hooks'
import { useSubPage } from './composables'
import { getScenes } from '@/services/api'
import { tnNavPage } from '@tuniao/tnui-vue3-uniapp/utils'
import { useUserStore } from '@/stores'
import { notActiveBar } from '@/components/not-active-bar'
import { gradePopup } from '@/components/grade-popup'
import storageApi from '@/utils/storage'
const isAnimation = ref(false)
const autoplay = ref(2000)
const {
  navBarInfo,
  loginHandle,
  navUserInfoPage,
  navCommonProblemPage,
  navbarInitFinishHandle,
} = useSubPage()
onShareAppMessage((e) => {
  return {
    title: '语境佳',
    path: '/pages/typeStudy/dialogue/index',
  }
})
const { style: authInfoScrollStyle, scrollHandle: authInfoScrollHandle } =
  useScrollUpdownBottomContent('up', 80)
const userStore = useUserStore()
const isShow = ref(false)
const gradePopup = ref(null)
const gradeName = ref('一年级')
const swiperIndex = ref(0)
const notActiveBar = ref(null)
let timer = null
const list = ref([])
const total = ref(0)
onShow(() => {
  // setTimeout(() => {
  //   userStore.checkUserSn()
  // }, 1000)
  timer = setInterval(() => {
    if (storageApi.get('gradeData') && storageApi.get('token')) {
      gradeName.value = storageApi.get('gradeData').name
      getData()
      clearInterval(timer)
    }
  }, 100)
  if (notActiveBar.value) {
    notActiveBar.value.show()
  }

  // setTimeout(() => {
  // 	notActiveBar.value.show()
  // }, 2000)
})
onReady(() => {
  notActiveBar.value.show()
})
onPageScroll((e) => {})
const swiperChange = (e) => {
  swiperIndex.value = e.detail.current
}
// 监听是否绑定设备
watch(
  () => userStore.getIfBindSn,
  (val) => {
    notActiveBar.value.show()
  }
)
// 监听是否第一次扫码绑定设备 是的话打开选择年级
watch(
  () => userStore.getIsFirstBind,
  (val) => {
    if (val) {
      showPopup()
    }
  }
)

const jumpPage = (type, mode) => {
  switch (type) {
    case 1:
      tnNavPage(`/home-page/temp/video-center?mode=${mode}`)
      break
    case 2:
      tnNavPage(`/home-page/temp/audio-list`)
      break
  }
}

const refreshData = () => {
  userStore.cutCurrentCgPage()
  isAnimation.value = true
  getData()
}

const showPopup = () => {
  gradePopup.value.show()
}

const handleUpdate = () => {
  userStore.cutCurrentCgPage(1)
  userStore.cutCurrentDrPage(1)

  let name = storageApi.get('gradeData').name
  console.log(name)
  gradeName.value = name
  getData()
}

const getData = () => {
  let gradeData = storageApi.get('gradeData')
  let params = {
    page: userStore.currentCgPage,
    pageSize: 6,
    grade: gradeData.grade || 1,
    level: gradeData.level || 0,
    volume: gradeData.volume || 0,
  }
  getScenes(params).then((res) => {
    const { code, data } = res
    if (code === 0) {
      clearInterval(timer)
      total.value = data.total
      if (data.dataList == null) {
        if (userStore.currentCgPage == 1) {
          uni.showToast({
            title: '当前教材设置下暂无数据',
            duration: 2000,
            icon: 'none',
          })
          list.value = []
        } else {
          userStore.cutCurrentCgPage(1)
          getData()
        }
      } else {
        list.value = data.dataList
        setTimeout(() => {
          isAnimation.value = false
        }, 1000)
      }
    }
  })
}

const toActivePage = async (item) => {
  tnNavPage(`/pages/typeStudy/en-answer?id=${item.id}&name=${item.name}`)
  // if (userStore.getIfBindSn) {
  //   tnNavPage(`/home-page/typeStudy/en-answer?id=${item.id}&name=${item.name}`)
  // } else {
  //   uni.showModal({
  //     title: '设备未激活',
  //     content: '学习英语需要长期坚持哦，超多权益等你来解锁',
  //     confirmText: '立即激活',
  //     cancelText: '放弃福利',
  //     success: function (res) {
  //       if (res.confirm) {
  //         console.log('用户点击确定')
  //         userStore.toScanMate()
  //       } else if (res.cancel) {
  //         console.log('用户点击取消')
  //         tnNavPage('/pages/index/index', 'switchTab')
  //       }
  //     },
  //   })
  // }
}
</script>

<template>
  <view class="page">
    <view class="flex flex-js-sb flex-ai-center pt-20 pb-16 plr-8">
      <view class="listi-title font-size-16 font-w-bold">
        校园生活 ({{ total }})
      </view>
      <!-- <view class="flex" @click="refreshData">
        <image
          class="mr-4 reset-icon"
          src="../../../static/imgs/refresh.png"
          :class="isAnimation ? 'refish' : ''"
        ></image>
        <view class="font-color-c666 font-size-12">换一批</view>
      </view> -->
    </view>
    <view class="item-bar-main">
      <view
        class="item-bar"
        v-for="(item, index) in list"
        :key="index"
        @click="toActivePage(item)"
      >
        <view style="height: 214rpx; color: #4473c8">
          <TnLazyLoad
            :src="item.picture"
            class="left-head"
            mode="aspectFill"
          ></TnLazyLoad>
        </view>
        <view class="right-info">
          <view class="top_box flex flex-js-sb plr-12 pt-8">
            <view
              class="title font-size-16 font-w-bold"
              style="max-width: 212rpx"
            >
              <view class="en-name"> {{ item.en_name }}</view>

              <text class="font-size-14 font-color-c666 zh-name">{{
                item.name
              }}</text>
            </view>
            <image
              v-if="item.isMem == 1"
              src="../../static/imgs/finish_icon.png"
              mode="widthFix"
              class="finish-icon-new"
            ></image>
          </view>
        </view>
      </view>
      <view style="clear: both"></view>
    </view>
    <!-- <view
      class="tn-flex plr-12 ptb-16 tn-flex-wrap tn-padding-xs bg-color-white br-16"
    >
      <view
        class="special"
        v-for="(item, index) in list"
        :key="index"
        @click="toActivePage(item)"
      >
        <view
          class="tn-flex tn-flex-direction-column pl-12"
          style="
            height: 100%;
            color: #4473c8;
            border-radius: 28rpx;
            box-shadow: 0rpx 10rpx 30rpx 0rpx rgba(52, 103, 194, 0.08);
          "
          :style="{ 'background-color': 'rgba' + item.bgColor }"
        >
          <view class="tn-text-lg tn-text-bold mt-12">
            <text
              class="tn-text-ellipsis font-size-16"
              :style="{ color: item.color }"
              >{{ item.name }}</text
            >
          </view>
          <view class="tn-text-xs tn-padding-top-xs mt-4">
            <text class="tn-text-ellipsis font-color-c999 font-size-12">{{
              item.enname
            }}</text>
          </view>
        </view>
        <image
          v-if="item.isMem == 1"
          src="../../static/imgs/finish_icon.png"
          mode="widthFix"
          class="finish-icon"
        ></image>
      </view>
    </view> -->
  </view>
  <notActiveBar ref="notActiveBar" height="0" />
  <gradePopup ref="gradePopup" @updateValue="handleUpdate" />
</template>

<style lang="scss" scoped>
@import './styles/index.scss';

.banner-box {
  position: relative;

  .tips-one {
    position: absolute;
    left: 36rpx;
    top: 130rpx;
    width: 50%;

    .t1 {
      font-family:
        PingFang SC,
        PingFang SC;
      font-weight: 600;
      font-size: 32rpx;
      color: #ffffff;
      line-height: 48rpx;
      font-style: normal;
      text-transform: none;
    }

    .t2 {
      margin-top: 10rpx;
      width: 378rpx;
      font-family:
        PingFang SC,
        PingFang SC;
      font-weight: 400;
      font-size: 24rpx;
      color: #ffffff;
      line-height: 40rpx;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }
  }

  .tips-two {
    position: absolute;
    left: 36rpx;
    bottom: 78rpx;
    width: 50%;

    .t1 {
      height: 44rpx;
      font-family:
        PingFang SC,
        PingFang SC;
      font-weight: 500;
      font-size: 28rpx;
      color: #4b49e8;
      line-height: 44rpx;
      text-align: left;
      font-style: normal;
      text-transform: none;
      padding-left: 44rpx;
    }

    .t2 {
      // width: 318rpx;
      height: 40rpx;
      font-family:
        PingFang SC,
        PingFang SC;
      font-weight: 500;
      font-size: 24rpx;
      color: #6968c9;
      line-height: 40rpx;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }
  }
}

.finish-icon-new {
  width: 40rpx;
}

:deep(.tn-navbar-back__text__icon) {
  display: none;
}

.en-name,
.zh-name {
  width: 200rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

:deep(.tn-navbar-back__text) {
  display: none !important;
}

.tn-navbar-back__text {
  display: none !important;
}

.grade {
  z-index: 99;
  // width: 160rpx;
  height: 56rpx;
  line-height: 56rpx;
  background: #e1e0ff;
  border-radius: 1998rpx 1998rpx 1998rpx 1998rpx;
  color: #4b49e8;
  font-size: 24rpx;
  position: absolute;
  // top: 42rpx;
  vertical-align: middle;
  text-align: center;
  padding: 0 16rpx;
  top: 82rpx;
}

.toggle-icon {
  vertical-align: middle;
  width: 38rpx;
  margin-top: -6rpx;
}

.uni-margin-wrap {
  width: 690rpx;
  width: 100%;
}

//临时
.swiper {
  height: 380rpx;
  margin-top: 40rpx;
  image {
    height: 400rpx;
  }
}

.swiper-item {
  display: block;
  // height: 300rpx;
  line-height: 300rpx;
  text-align: center;
  border-radius: 16rpx;
  overflow: hidden;
}

.swiper-list {
  margin-top: 40rpx;
  margin-bottom: 0;
}

.uni-common-mt {
  margin-top: 60rpx;
  position: relative;
}

.info {
  position: absolute;
  right: 20rpx;
}

.uni-padding-wrap {
  width: 550rpx;
  padding: 0 100rpx;
}
</style>
